<template>
	<view class="page">
		<view class="add-wrapper">
			<button class="add-button" @click="openUsedCircularDrawer('ADD')">发布信息</button>
		</view>
		<WaterfallsFlow :wfList='list' @itemTap="itemTap" />
		<uni-drawer class="infoDrawer-form" ref="addInfoDrawer" mode="right" :width="320" :mask-click="true">
			<scroll-view scroll-y style="height: 100%;">
				<uni-card :is-shadow="true" is-full>
					<text v-if="formDrawerDisable" class="drawer-tips">本平台只提供消息发布分享功能，并不保证该信息正确性，涉及金钱交易请仔细核实。</text>
					<text v-if="!formDrawerDisable" class="drawer-tips">本平台目前仅供邻居使用，请勿发布虚假信息，一经发现，封号处理。</text>
				</uni-card>
				<view class="infoDrawer-item">
					<label>图片:</label>
					<image v-if="!usedCircularDetail.image" class="img-upload" src="/static/uploadImg.png"
						@click="uploadImg" />
					<image v-if="usedCircularDetail.image" style="width: 60%;" mode="widthFix"
						:src="usedCircularDetail.image" @click="uploadImg" />
				</view>
				<view class="infoDrawer-item">
					<label>标题:</label>
					<input class="infoDrawer-item-input" :disabled="formDrawerDisable"
						v-model="usedCircularDetail.title" placeholder="标题" />
				</view>
				<view class="infoDrawer-item">
					<label>价格:</label>
					<input class="infoDrawer-item-price" :disabled="formDrawerDisable" type="number"
						v-model="usedCircularDetail.price" placeholder="价格" />
					<label>元</label>
				</view>
				<view class="infoDrawer-item">
					<label>描述:</label><textarea :disabled="formDrawerDisable" v-model="usedCircularDetail.des" />
				</view>
				<view class="infoDrawer-item">
					<label>联系方式:</label>
					<textarea :disabled="formDrawerDisable" style="height: 100rpx;"
						v-model="usedCircularDetail.concactInfo" />
				</view>
				<button v-if="formDrawerDisable" style="background-color: #02b920;" @click="chartOnline">站内交流</button>
				<button v-if="!formDrawerDisable" style="background-color: #71abe8;" @click="confirmForm">提交</button>
				<button v-if="!formDrawerDisable" style="background-color: #ff4548;" @click="closeDrawer">取消</button>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import WaterfallsFlow from '../../../common/components/WaterfallsFlow/WaterfallsFlow.vue'
	import operate from '../../../common/utils/operate.js'
	import {
		usedCircularList,
		addUsedCircular,
		updateUsedCircular,
		getContact
	}
	from '../../../common/api/middleServer/usedCircularApi.js'
	import {
		uploadFile
	} from '../../../common/utils/uploadRequest.js'
	export default {
		components: {
			WaterfallsFlow
		},
		data() {
			return {
				list: [],
				drawerStatus: 'ADD',
				isSelf: false,
				usedCircularDetail: {
					id: '',
					title: '',
					des: '',
					image: '',
					imageId: '',
					price: '',
					concactInfo: '',
				},
				pageInfo: {
					current: 1,
					size: 10,
					total: 0,
					queryParams: {
						createId: ''
					}
				},
				rentContactMobile: '',
				getContactDis: false,
				getContactDis: false,
			}
		},
		computed: {
			formDrawerDisable: function() {
				return this.drawerStatus === 'DETAIL';
			},
		},
		onLoad(type) {
			if (type.type && type.type === 'self') {
				this.pageInfo.queryParams.createId = this.$store.getters.userId
				this.isSelf = true
			}
			console.log(1190, this.pageInfo)
			// 请求数据
			this.getFirstPage(this.pageInfo)
		},
		onReachBottom() {
			// 触底刷新
			if ((this.pageInfo.current * this.pageInfo.size) < this.pageInfo.total) {
				this.pageInfo.current++
				usedCircularList(this.pageInfo).then(res => {
					this.list = this.list.concat(res.records)
					this.pageInfo = res
				})
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.getFirstPage()
		},
		methods: {
			getFirstPage(pageInfo) {
				usedCircularList(pageInfo).then(res => {
					this.list = res.records
					this.pageInfo = res
				})
			},
			openUsedCircularDrawer(drawerStatus, item) {
				if (item) {
					this.usedCircularDetail = item
				} else {
					this.usedCircularDetail = {
						id: '',
						title: '',
						des: '',
						image: '',
						price: '',
						concactInfo: '',
					}
				}
				this.rentContactMobile = ''
				this.getContactDis = false
				this.$refs.addInfoDrawer.open();
				this.drawerStatus = drawerStatus
			},
			closeDrawer() {
				this.$refs.addInfoDrawer.close();
			},
			itemTap(item) {
				console.log(item);
				this.openUsedCircularDrawer(this.isSelf ? 'EDIT' : 'DETAIL', item)
			},
			uploadImg() {
				if (!this.formDrawerDisable) {
					let usedDetail = this.usedCircularDetail
					console.log(this.usedCircularDetail);
					uni.chooseMedia({
						count: 9,
						mediaType: ['image'],
						sourceType: ['album', 'camera'],
						sizeType: ['compressed'],
						maxDuration: 30,
						camera: 'back',
						success: function(res) {
							uni.compressImage({
								src: res.tempFiles[0].tempFilePath,
								quality: 20,
								success: res1 => {
									console.log("文件上传")
									uploadFile(res1.tempFilePath).then(res2 => {
										usedDetail.imageId = res2
										usedDetail.image = res1.tempFilePath
									})
								}
							})
						}
					})
				}
			},
			confirmForm() {
				this.usedCircularDetail.image = null
				if ('ADD' === this.drawerStatus) {
					addUsedCircular(this.usedCircularDetail).then(res => {
						this.$refs.addInfoDrawer.close()
						this.getFirstPage()
					})
				} else {
					updateUsedCircular(this.usedCircularDetail).then(res => {
						this.$refs.addInfoDrawer.close()
						this.getFirstPage()
					})
				}
			},
			chartOnline() {
				// 发起新的会话
				this.$store.dispatch('addNewChart', this.usedCircularDetail.createId)
			},
			getPusherContact() {
				getContact(this.usedCircularDetail.id).then(res => {
					if (!res) {
						uni.showToast({
							icon: "error",
							title: '该用户未留手机号。'
						})
						this.getContactDis = true
						console.log(this.getContactDis)
					} else {
						this.rentContactMobile = res
					}
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #eee;
	}
</style>
